<!--
 * @Author: 高瑞寒 15932717091@163.com
 * @Date: 2022-04-24 18:39:50
 * @LastEditTime: 2022-04-24 20:00:12
 * @LastEditors: 高瑞寒 15932717091@163.com
 * @Description: 
-->
<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
</head>

<body>
  <div id="test"></div>
  <script type="text/javascript" src="../js/react.development.js"></script>

  <script type="text/javascript" src="../js/react-dom.development.js"></script>

  <script type="text/javascript" src="../js/babel.min.js"></script>
  <script type="text/babel">
    class MyComponent extends React.Component {
      // 调用 1 次
      constructor() {
        super()
        this.state = {
          count: 0
        }
        // 解决 this 指向问题
        // 左: 点击调用的原型对象上的方法
        // 右: 绑定原型对象上方法的 this 指向
        this.handleClick = this.handleClick.bind(this)
      }
      // 点击几次调用几次
      handleClick() {
        // 由于 handleClick 是作为 onClick 的回调,所以不能通过实例调用,是直接调用
        // 类中的方法默认开启了局部的严格模式,所以 handleClick 中的 this 为undefined
        this.setState({ count:this.state.count++ })
      }
      // 调用 1+n 次
      render() {
        const { count } = this.state
        return (
          <div>
            <h1>{count}</h1>
            <button onClick={this.handleClick}>点击</button>
          </div>
        )
      }
    }
    ReactDOM.render(<MyComponent />, document.querySelector('#test'))
  </script>
</body>

</html>